
<template>
    <el-card>
        <!--头部区域-->
        <template #header>
      <div class="card-header">
        <span>商品列表</span>
      </div>
    </template>
    <!--搜索按钮区域-->
    <el-row :gutter="10">
    <el-col :span="4">
        <el-input v-model="serchcpunt" placeholder="请输入搜索商品名称"  />
    </el-col>
    <el-col :span="4">
        <el-button type="primary" @click="handleSearch()">搜索</el-button>
        <el-button type="primary" @click="showDialog()">添加</el-button>
    </el-col>
    </el-row>
    <!--表格区域-->
    <el-table :data="tableData" >
    <el-table-column prop="id" label="编号" ></el-table-column>
    <el-table-column prop="name" label="商品名称" >
        <template v-slot="scope">
            <el-popover effect="dark" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>商品名称: {{ scope.row.title }}</div>
            <div>价格: {{ scope.row.price }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.title }}</el-tag>
          </template>
        </el-popover>
        </template> 
    </el-table-column>
    <el-table-column label="商品图片" >
        <template v-slot="scope">
         <img :src="urlImg + scope.row.thumbnail" style="width: 180px;height: 180px;">
        </template>
    </el-table-column>
    <el-table-column prop="name" label="操作">
        <template v-slot="scope">
        <el-button size="small" @click="showDialog1(scope.row.id)">修改</el-button>
        <el-button size="small" type="danger" @click="deletes(scope.row.id)">删除</el-button>
        </template>
    </el-table-column>
  </el-table>
  <!--分页区域-->
  <el-pagination background layout="prev, pager, next" :total="total" v-model:page-size="pageSize" v-model:current-page="currentPage"  @current-change="handleCurrentChange"/>
    </el-card>
  <!--添加对话框-->
  <addProduct></addProduct>
  <!--编辑对话框-->
  <editProduct></editProduct>
</template>
   

<script setup>
import { onMounted, reactive, toRefs } from 'vue';
import axios from "axios"
import { ElMessage, ElMessageBox } from 'element-plus'
//引入addProduct组件
import addProduct from "../components/addProduct.vue"
//引入editProduct组件
import editProduct from "../components/editProduct.vue"
import { useUsersStore } from "../store/shooing"
import { storeToRefs } from "pinia"
let store = useUsersStore()
let { tableData, total, currentPage, pageSize, serchcpunt } = storeToRefs(store)
//图片路径补充
let urlImg = import.meta.env.VITE_APP_URL
//点击添加
function showDialog() {
    store.addVisible = true
}
//点击删除
function deletes(id) {
    ElMessageBox.confirm(
        '确定删除嘛？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).catch((err) => err).then((h) => {
        if (h !== 'confirm') return ElMessage.info("已取消删除")
        axios.delete("/goods/delete", { params: { id: id } }).then((res) => {
            ElMessage.success("删除成功")
            store.load()
        })
    })
}
//页数改变
function handleCurrentChange(news) {
    // console.log(news)
    store.currentPage = news
    store.load()
}
//点击搜索
function handleSearch() {
    store.load()
}
//点击修改
function showDialog1(id) {
    store.editVisible = true
    // console.log(id)
    store.godsId = id
    store.sjId()

}
onMounted(() => {
    store.load()


})



</script>

<style scoped>

</style>